<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-button type="primary" @click="showEditDialog('')">添加影厅</el-button>
        </el-col>
      </el-row>
      <el-table :data="hallList" border stripe>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="影厅名称" prop="name"></el-table-column>
        <el-table-column label="状态" style="width: 120px;">
          <template slot-scope="scope">
            <el-switch v-if="scope.row.status=='Y' || scope.row.status=='N'"  v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
                       active-value="Y" inactive-value="N" @change="updateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="addTime"></el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="修改影厅" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="影厅名称" prop="name">
          <el-input v-model="editForm.name" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHall">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Movie.js'
export default {
  data() {
    return {
      queryInfo: {
      },
      hallInfo: {
        'name':''
      },
      hallList: [],
      addDialogVisible: false,
      editDialogVisible: false,
      editForm: {
        hallName: ''
      },
    }
  },
  created() {
    this.getHallList()
  },
  methods: {
    addDialogClosed() {
    },
    editDialogClosed() {

    },
    async showEditDialog(id) {
      Api.getSpecialHall({'id':id}).then(res => {
        if (res.success) {
          this.editForm = res.data
          this.editDialogVisible = true
        } else {
          return this.$message.error('查询失败')
        }
      })
    },
    getHallList() {
        Api.getSpecialHallList(this.queryInfo).then(res => {
            if (res.success) {
                this.hallList = res.data;
            } else {
                return this.$message.error('获取数据失败')
            }
        })
    },
    editHall() {
      Api.saveSpecialHall(this.editForm).then(res => {
        if (res.success) {
          this.editDialogVisible = false
          this.getHallList()
          this.$message.success('修改成功！')
        } else {
          return this.$message.error('修改失败: ' + res.msg)
        }
      })
    },
    updateStatus(obj) {
      Api.updateSpecialHallStatus({'id':obj.id, 'status':obj.status}).then(res => {
        if (res.success) {
          this.$message.success('更新状态成功！')
        } else {
          return this.$message.error('更新状态失败！')
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
</style>
